<template>
  <div class="list-content-hook">
    <div class="content-card" v-for="(item, index) in productList" :key="index">
      <div class="card-title">
        <img class="item-logo" :src="item.productImg"/>
        <span class="item-name">{{item.productName}}</span>
        <span style="flex: 1"></span>
        <span class="apply-num">{{item.applyNumber}}人申请</span>
      </div>
      <div class="card-desc">
        <div class="desc-left border-right">
          <span class="left-content">{{item.loanMin | formatUnit}}<span style="padding-right: .04rem">-</span>{{item.loanMax | formatUnit}}</span>
          <span class="title">可贷额度(元)</span>
        </div>
        <div class="desc-mid">
          <span class="title">利息:&nbsp;{{item.minRate}}%</span>
          <span class="title">放款时长:&nbsp;{{item.loanTime}}小时</span>
          <span class="title">借款期限:&nbsp;{{item.maxTerm}}{{item.maxTermUnit | formatTimeUnit}}</span>
        </div>
        <div class="desc-right" @click="applyClick(item)">
          立即申请
        </div>
      </div>
      <div class="card-special">{{item.productFeatures}}</div>
    </div>
  </div>
</template>
<script>
  import { mapState,mapMutations } from 'vuex'
  export default{
    name: 'ContentCard',
    props: {
      productList: {
        type: Array,
        default: []
      }
    },
    computed:{
      ...mapState({
        token:'token'
      }),
    },
    methods:{
      ...mapMutations(['changeProduct']),
      applyClick(item){
//        if(!this.token){
//          this.$router.push('/login')
//          return
//        }
        this.changeProduct(item);
        this.$router.push({
          name: 'product',
          query: {
            id: item.id,
            name:item.productName
          }
        })
      }
    }
  }
</script>
<style lang="stylus" scoped>
  @import "~style/varibles.styl"
  @import '~style/mixins.styl'
  .list-content-hook
    padding :0
    .content-card
      margin-bottom: .2rem
      background: white
      border-radius: .08rem
      padding: .2rem .2rem
      box-shadow()
      .card-title
        display: flex
        align-items: center
        padding-bottom: .1rem
        .item-logo
          width: .4rem
          height: .4rem
          border-radius: .08rem
        .item-name
          margin-left: .2rem
          color: #383838
          font-size .30rem
          font-weight: bold
          ellipsis()
        .item-label
          border :.02rem solid #eaeaea
          margin-left: .17rem
          color: #999
          border-radius: .04rem
          font-size: .2rem
          padding: .05rem .05rem
          ellipsis()
        .apply-num
          font-size: .24rem
          color $disabledText
          ellipsis()
      .card-desc
        display: flex
        justify-content: space-between
        align-items: center
        .desc-left
          display: flex
          flex-direction: column
          flex 1
          .title
            font-size: .24rem !important
            color #666666
            line-height .34rem
            margin-top .08rem
          .left-content
            font-size: .34rem
            font-weight: bold
            color: $cardText
            line-height .46rem
        .desc-mid
          display: flex
          flex 1
          flex-direction: column
          padding-left 8%
          .title
            font-size: .24rem !important
            line-height .36rem
        .desc-right
          width: 1.7rem
          height: .60rem
          line-height: .60rem
          text-align: center
          background: linear-gradient(to right, $gradientTint, $gradientDeep)
          border-radius: .6rem
          color: #fff
          font-size .26rem
      .card-special
        border-radius 3rem
        background-color #f7f7f7
        color #666666
        height .46rem
        font-size .24rem
        line-height .46rem
        padding-left .15rem
        margin-top .1rem
</style>
